import React from 'react';
import { connect } from 'dva';
import styles from '../terrace/terrace.less';
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip,Legend } from 'recharts';//线形图
import {BarChart, Bar} from 'recharts';//柱状图
import {AreaChart, defs, linearGradient, Area } from 'recharts';
import {ComposedChart} from 'recharts';
import {PieChart, Pie } from 'recharts';

const data = [
      {name: '一月', 支出: 4000, 收入: 2400, amt: 2400},
      {name: '二月', 支出: 3000, 收入: 1398, amt: 2210},
      {name: '三月', 支出: 2000, 收入: 9800, amt: 2290},
      {name: '四月', 支出: 2780, 收入: 3908, amt: 2000},
      {name: '五月', 支出: 1890, 收入: 4800, amt: 2181},
      {name: '六月', 支出: 2390, 收入: 3800, amt: 2500},
      {name: '七月', 支出: 5490, 收入: 2300, amt: 2100},
      {name: '八月', 支出: 3300, 收入: 6490, amt: 2100},
      {name: '九月', 支出: 2300, 收入: 4490, amt: 2100},
      {name: '十月', 支出: 5490, 收入: 8300, amt: 2100},
      {name: '十一月', 支出: 3490, 收入: 4300, amt: 2100},
      {name: '十二月', 支出: 3490, 收入: 1300, amt: 2100},
];

const data01 = [{name: '交通费', value: 400}, {name: '住宿费', value: 300},
                {name: '就餐费', value: 300}, {name: '解决内部矛盾费', value: 200},
                {name: '就餐费', value: 500}
              ]

const data02 = [{name: 'A1', value: 100},
                     {name: 'A2', value: 300},
                     {name: 'B1', value: 100},
                     {name: 'B2', value: 80},
                     {name: 'B3', value: 40},
                     {name: 'B4', value: 30},
                     {name: 'B5', value: 50},
                     {name: 'C1', value: 100},
                     {name: 'C2', value: 200},
                     {name: 'D1', value: 150},
                     {name: 'D2', value: 50},
                     {name: 'E1', value: 250},
                     {name: 'E2', value: 250}]

function PerInformation() {
  return (
    <div className={styles.normal}>
      <LineChart width={1200} height={400} data={data}
          margin={{top:50, right:30, left:200, bottom:0}}>
          <XAxis dataKey="name" />
          <YAxis/>
          <CartesianGrid strokeDasharray="3 3"/>
          <Tooltip/>
          <Legend />
          <Line type="monotone" dataKey="支出" stroke="#8884d8" activeDot={{r: 8}}/>
          <Line type="monotone" dataKey="收入" stroke="#82ca9d" />
      </LineChart>

      <BarChart width={1200} height={500} data={data}
          margin={{top:80,right:30,left:200,bottom:0}}>
          <XAxis dataKey="name" stroke="#8884d8"/>
          <YAxis />
          <Tooltip wrapperStyle={{ width: 100, backgroundColor: '#ccc' }}  />
          <Legend width={100} wrapperStyle={{ top: 50, right: 30,
            backgroundColor: '#f5f5f5', border: '1px solid #d5d5d5',
            borderRadius: 3, lineHeight: '40px' }}  />
          <CartesianGrid stroke="#ccc" />
          <Bar type="monotone" dataKey="收入" fill="#8884d8" barSize={30} />
          <Bar type="monotone" dataKey="支出" fill="#82ca9d" barSize={30} />
      </BarChart>

      <AreaChart width={1200} height={400} data={data}
        margin={{ top: 0, right: 30, left: 200, bottom: 0 }}>
        <defs>
          <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
            <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
          </linearGradient>
          <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
            <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
          </linearGradient>
        </defs>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Area type="monotone" dataKey="支出" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" />
        <Area type="monotone" dataKey="收入" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" />
      </AreaChart>

      <ComposedChart width={1200} height={400} data={data}
        margin={{top:60, right:30, left:200, bottom:0}}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <CartesianGrid stroke="#f5f5f5" />
        <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
        <Bar dataKey="收入" barSize={20} fill="#413ea0" />
        <Line type="monotone" dataKey="支出" stroke="#ff7300" />
      </ComposedChart>

      <PieChart width={1200} height={400}>
        <Pie data={data01} cx="50%" cy="50%" outerRadius={70} fill="#8884d8" />
        <Pie data={data02} cx="50%" cy="50%" outerRadius={90} innerRadius={70}  fill="#82ca9d" label/>
      </PieChart>

    </div>
  );
}

function mapStateToProps() {
  return {};
}

export default connect(mapStateToProps)(PerInformation);
